﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="/Content/themes/base/jquery-ui.css" />
    <!-- The Css UI theme extension of jqGrid -->
    <link rel="stylesheet" type="text/css" href="/css/ui.jqgrid.css" />    
    <!-- jQuery library is a prerequisite for jqGrid -->
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <!-- language pack - MUST be included before the jqGrid javascript -->
    <script type="text/javascript" src="/js/trirand/i18n/grid.locale-en.js"></script>
    <!-- the jqGrid javascript runtime -->
    <script type="text/javascript" src="/js/trirand/jquery.jqGrid.min.js"></script>  
</head>
<body>
    <div>
        <table id="list2"></table>
        <div id="pager2"></div>
    </div>
</body>
</html>
<script>
    $("#list2").jqGrid({
        url: '/Achievement/GetAchievementList',
        datatype: "json",
        colNames: ['Name', 'LoginName'],
        colModel: [
   		{ name: 'Name', index: 'Name', width: 55 },
   		{ name: 'LoginName', index: 'LoginName', width: 90 },
   	],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#pager2',
        sortname: 'Name',
        viewrecords: true,
        sortorder: "desc",
        caption: "JSON Example"
    });
    jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
</script>